<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 700px;
      margin: 20px auto;
      flex-wrap: wrap;
    }

    .item {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-right: 10px;
    }

    .item>input {
      flex: 1;
      outline: none;
      height: 30px;
    }

    .res,
    .res2 {
      width: 400px;
      height: 400px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      padding: 20px;
      line-height: 20px;
    }

    .btn,
    .btn2 {
      padding: 10px 15px;
      box-sizing: border-box;
      background: cornflowerblue;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item">
      原文本：
      <input class="inp1" type="text" placeholder="请在此输入要替换的文本">
    </div>
    <div class="item">
      被替换的字符：
      <input class="inp2" type="text" placeholder="请在此输入被替换的字符">
    </div>
  </div>
  <div class="btn">解析</div>

  <h3>输出结果：</h3>
  <div class="res">

  </div>


  <div class="box">
    <div class="item">
      原文本：
      <input class="inp3" type="text" placeholder="请在此输入要替换的文本">
    </div>
    <div class="item">
      要在两两之间插入的字符：
      <input class="inp4" type="text" placeholder="请在此输入要插入的字符">
    </div>
  </div>
  <div class="btn2">生成</div>

  <h3>输出结果：</h3>
  <div class="res2">

  </div>


</body>
<script>
  const sel = el => document.querySelector(el);
  const inp1 = sel('.inp1'), inp2 = sel('.inp2'), inp3 = sel('.inp3'), inp4 = sel('.inp4');
  const btn = sel('.btn'), btn2 = sel('.btn2'), res = sel('.res'), res2 = sel('.res2');
  const parseStr = (s, t) => s.split(t).join('');
  const joinStr = (s, j) => {
    let r = '';
    for (let i = 0, val; val = s[i++];) {
      r += i % 2 === 0 ? j + val : j;
    }
    return r
  }

  btn.addEventListener('click', function () {
    let s = inp1.value, t = inp2.value;
    res.innerText = parseStr(s, t)
  })
  btn2.addEventListener('click', function () {
    let s = inp3.value, t = inp4.value;
    res2.innerText = joinStr(s, t)
  })
</script>

</html>